<template>
  <div class="pageContent">
    <div style="margin-bottom:20px">
      <a-button type="primary" @click="onEdit()">编辑</a-button>
    </div>
    <!-- 表单 -->
    <div class="aform">
      <a-form-model ref="ruleForm" :model="form" :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-form-model-item ref="engineering" label="工程专业" prop="engineering">{{form.engineering}}</a-form-model-item>
        <a-form-model-item ref="name" label="单位名称" prop="name">{{form.name}}</a-form-model-item>
        <a-form-model-item ref="code" label="统一社会信用代码" prop="code">{{form.code}}</a-form-model-item>
        <a-form-model-item ref="price" label="工程造价（元）" prop="price">{{form.price}}</a-form-model-item>
        <a-form-model-item ref="area" label="建设规模（km）" prop="area">{{form.area}}</a-form-model-item>
        <a-form-model-item ref="time" label="开工时间" prop="time">{{form.time}}</a-form-model-item>
        <a-form-model-item ref="planTime" label="计划完工时间" prop="planTime">{{form.planTime}}</a-form-model-item>
        <a-form-model-item ref="pr" label="项目经理" prop="pr">{{form.pr}}</a-form-model-item>
      </a-form-model>
    </div>
    <!-- 对话框 -->
    <div>
      <a-modal
        v-model="visible"
        title="编辑单位信息"
        @ok="handleOk"
        :maskClosable="false"
        cancelText="取消"
        okText="确认"
      >
        <a-form-model
          ref="ruleForm2"
          :model="formModal"
          v-if="visible"
          :label-col="labelCol"
          :wrapper-col="wrapperCol"
        >
          <a-form-model-item ref="engineering" label="工程专业" prop="engineering">
            <a-select label-in-value v-model="formModal.engineering" placeholder="请选择">
              <a-select-option
                v-for="(item,index) in engineering "
                :key="index"
                :value="item.key"
              >{{item.lable}}</a-select-option>
            </a-select>
          </a-form-model-item>
          <a-form-model-item ref="name" label="单位名称" prop="name">
            <a-input v-model="formModal.name" :maxLength="30" placeholder="请输入单位名称" />
          </a-form-model-item>
          <a-form-model-item ref="code" label="统一社会信用代码" prop="code">
            <a-input v-model="formModal.code" :maxLength="30" placeholder="请输入统一社会信用代码" />
          </a-form-model-item>
          <a-form-model-item ref="price" label="工程造价（元）" prop="price">
            <a-input v-model="formModal.price" :maxLength="30" placeholder="请输入工程造价（元）" />
          </a-form-model-item>
          <a-form-model-item ref="area" label="建设规模（km）" prop="area">
            <a-input v-model="formModal.area" :maxLength="30" placeholder="请输入建设规模（km）" />
          </a-form-model-item>
          <a-form-model-item ref="time" label="开工时间" prop="time">
            <a-date-picker v-model="formModal.time" type="date" style="width: 100%;" />
          </a-form-model-item>
          <a-form-model-item ref="plantime" label="计划完工时间" prop="plantime">
            <a-date-picker v-model="formModal.plantime" type="date" style="width: 100%;" />
          </a-form-model-item>
          <a-form-model-item ref="pr" label="项目经理" prop="pr">
            <a-input v-model="formModal.pr" :maxLength="30" placeholder="请输入项目经理姓名" />
          </a-form-model-item>
        </a-form-model>
      </a-modal>
    </div>
  </div>
</template>

<script>
import moment from 'moment'
export default {
  data() {
    return {
      labelCol: { span: 7 },
      wrapperCol: { span: 12 },
      form: {
        engineering: '路基,桥梁',
        name: '江苏省交通工程集团有限公司',
        code: '91320000134759848E',
        price: 447586852,
        area: 10.65,
        time: '2020-03-01',
        planTime: '2020-03-01',
        pr: '童小童'
      },
      formModal: {
        time: moment(new Date()),
        plantime: moment(new Date())
      },
      visible: false,
       engineering: [
        {
          key: 'load',
          lable: '路基'
        },
        {
          key: 'bridge',
          lable: '桥梁'
        }]
    }
  },
  methods: {
    moment,
    onEdit() {
      this.visible = true
    },
    handleOk() {
      this.visible = false
    }
  }
}
</script>

<style>
</style>